<template>
  <div id="a1"></div>
</template>
<script>
import * as echarts from "echarts";
import { http } from "@/api/request";
export default {
  data() {
    return {};
  },
  methods: {},
  components: {},
  computed: {},
  watch: {},
  created() {},
  async mounted() {
    var list = [],
      addConfirm = [];
    let res = await http();
    var data = res.countryAddConfirmRankList;
    data.map(function (a, b) {
      list.push(a.nation);
      addConfirm.push(a.addConfirm);
    });
    console.log(data);

    var data = addConfirm;
    var titlename = list;
    var valdata = [];
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    var chartDom = document.getElementById("a1");
    var myChart = echarts.init(chartDom);
    window.onresize = function() {
      myChart.resize()
    }
    var option = {
      backgroundColor: "#0e2147",
      title: {
        text: "主要疫情国家治愈率",
        x: "center",
        y: "4%",
        textStyle: {
          color: "#fff",
          fontSize: "22",
        },
        subtextStyle: {
          color: "#90979c",
          fontSize: "16",
        },
      },
      xAxis: {
        show: false,
      },
      yAxis: [
        {
          show: true,
          data: titlename,
          inverse: true,
          axisLine: {
            show: false,
          },
        //   splitLine: {
        //     show: false,
        //   },
        //   axisTick: {
        //     show: false,
        //   },
          axisLabel: {
            color: "#fff",
            rich: {
              lg: {
                backgroundColor: "#339911",
                color: "#fff",
                borderRadius: 15,
                // padding: 5,
                align: "center",
                width: 15,
                height: 15,
              },
            },
          },
        },
        {
          show: true,
          inverse: true,
          data: valdata,
        //   axisLabel: {
        //     textStyle: {
        //       fontSize: 12,
        //       color: "#fff",
        //     },
        //   },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "条",
          type: "bar",
          yAxisIndex: 0,
          data: data,
          barWidth: 10,
          itemStyle: {
                normal: {
                barBorderRadius: 30,
                color: function (params) {
                    var num = myColor.length;
                    return myColor[params.dataIndex % num];
                },
                },
          },
          label: {
            normal: {
              show: true,
              position: "inside",
              formatter: "{c}%",
            },
          },
        },
        {
          name: "框",
          type: "bar",
          yAxisIndex: 1,
          barGap: "-100%",
          data: [100, 100, 100, 100, 100],
          barWidth: 17,
          itemStyle: {
            normal: {
              color: "none",
              borderColor: "#00c1de",
              borderWidth: 3,
              barBorderRadius: 15,
            },
          },
        },
      ],
    };
    option && myChart.setOption(option);
  },
};
</script>
<style lang="scss" scoped>
#a1 {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>
